<template>
  <div class="shadow-box transition_0_3" :class="{
    'flex flex_center':center,
    'btn':btn,
  }" :style="{
    width:width,
    height:height,
    borderRadius:borderRadius,
    backgroundColor:plain?'transparent':backgroundColor,
    borderStyle:plain?'solid':'none',
    borderWidth:borderWidth,
    color:color,
  }"
  @click="bindClick()"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "ShadowBox",
  props: {
    center: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    borderRadius: {
      type: String,
      default: "10px",
    },
    color: {
      type: String,
      default: "#fff",
    },
    plain:{
      type:Boolean,
      default:false
    },
    backgroundColor:{
      type:String,
      default:"#fff"
    },
    borderWidth:{
      type:String,
      default:"1px"
    },
    btn:{
      type:Boolean,
      default:false
    },
    bindClick:{
      type:Function,
      default:()=>{
      }
    }
  },
  data() {
    return {

    };
  },
};
</script>

<style lang="scss" scoped>
@import "../style/theme.scss";
.shadow-box{
  overflow: hidden;
  transition: all .4s ease-in-out;
  border-color: #fff;
  background-color: rgba(255,255,255,.5);
}
.shadow-box:hover {
  box-shadow: 4px 4px 10px 10px rgba(0, 0, 0, 0.1),-4px -4px 10px 10px rgba(255, 255, 255, 0.1);
  border-color: $blue-500;
}
.btn:hover{
  color: $blue-500 !important;
}
</style>